<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微表情检测系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-smile me-2"></i>微表情检测系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/"><i class="fas fa-home me-1"></i>首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about"><i class="fas fa-info-circle me-1"></i>关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container py-4">
        <div class="row">
            <!-- 左侧：上传区域 -->
            <div class="col-lg-7 mb-4">
                <div class="main-card">
                    <div class="card-header">
                        <i class="fas fa-upload me-2"></i>上传媒体
                    </div>
                    <div class="card-body">
                        <div class="upload-area" id="upload-area">
                            <input type="file" id="file-input" class="file-input" accept=".mp4,.avi,.mov,.webm,.jpg,.jpeg,.png">
                            <div class="upload-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            <div class="upload-text">
                                拖放视频或图像文件到此处<br>
                                或点击浏览文件
                            </div>
                            <label for="file-input" class="file-label">浏览文件</label>
                        </div>
                        
                        <div class="processing-status mt-4">
                            <h5 class="text-center mb-3">处理中</h5>
                            <div class="loading-spinner"></div>
                        </div>
                        
                        <div class="alert alert-danger mt-3" id="error-message" style="display: none;"></div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧：功能介绍 -->
            <div class="col-lg-5 mb-4">
                <div class="main-card about-card">
                    <div class="card-header">
                        <i class="fas fa-info-circle me-2"></i>关于微表情检测
                    </div>
                    <div class="card-body">
                        <p>微表情是人们在尝试隐藏或抑制情绪时，脸上自发出现的短暂且不自主的表情。微表情通常只持续0.5秒或更短时间，难以人眼直接察觉。</p>
                        
                        <h5 class="mt-4 mb-3">系统功能</h5>
                        <ul class="feature-list">
                            <li>自动检测视频或图像中的人脸</li>
                            <li>基于深度学习进行情绪分析和识别</li>
                            <li>识别7种基本情绪：高兴、悲伤、愤怒、惊讶、恐惧、厌恶和中性</li>
                            <li>提供情绪概率分布的可视化展示</li>
                            <li>支持视频时间轴微表情分析</li>
                        </ul>
                        
                        <h5 class="mt-4 mb-3">技术实现</h5>
                        <div class="d-flex justify-content-around mt-4">
                            <div class="text-center">
                                <img src="https://cdn.jsdelivr.net/gh/pytorch/pytorch@master/docs/source/_static/img/pytorch-logo-dark.png" alt="PyTorch" class="tech-icon">
                                <div class="mt-2">PyTorch</div>
                            </div>
                            <div class="text-center">
                                <img src="https://www.opencv.org/wp-content/uploads/2022/05/logo.png" alt="OpenCV" class="tech-icon">
                                <div class="mt-2">OpenCV</div>
                            </div>
                            <div class="text-center">
                                <img src="https://flask.palletsprojects.com/en/2.2.x/_images/flask-logo.png" alt="Flask" class="tech-icon">
                                <div class="mt-2">Flask</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 结果区域 -->
        <div class="results-area">
            <h3 class="mb-4">
                <i class="fas fa-chart-bar me-2"></i>分析结果
            </h3>
            <div id="results-container"></div>
        </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="footer mt-auto py-3">
        <div class="container text-center">
            <span class="text-muted">©| 基于深度学习的微表情识别研究</span>
        </div>
    </footer>

    <!-- JavaScript 库 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html> 